<template>
    <div>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()">
            <Icon type="ios-arrow-back"/>
            返回
        </Button>
        <Form ref="formCustom" :model="formCustom"   :rules="ruleCustom"  :label-width="100">
        <h3>离沈人员基本信息</h3>
        <Card class="line-style">
            <div class="line-wrap">
                <div class="line-main">
                        <Row>
                            <Col span="7">
                                <Form-item label="姓名" prop="name">
                                    <i-input type="text" v-model="formCustom.name" placeholder="请输入姓名"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="证件类型" prop="id_type">
                                    <Select  style="width:100%" v-model="formCustom.id_type"
                                             placeholder="请选择证件类型">
                                        <Option v-for="item in cardTypeList" :key="item.value" :value="item.value">{{item.label}}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="证件号码" prop="id_num">
                                    <i-input type="text" v-model="formCustom.id_num"  placeholder="请输入证件号码"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="联系电话" prop="contact">
                                    <i-input type="text" v-model="formCustom.contact" placeholder="请输入联系电话"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="上报日期" prop="imp_date">
                                    <DatePicker @on-change="dateChange" :options="options1" :value="formCustom.imp_date"
                                                format="yyyy-MM-dd" type="date" placeholder="请选择上报日期"></DatePicker>
                                </Form-item>
                            </Col>
                        </Row>
                </div>
            </div>
        </Card>

        <h3>离沈基本信息</h3>
        <Card class="line-style">
            <div class="line-wrap">
                <div class="line-main">
                        <Row>
                            <Col span="7">
                                <Form-item label="离沈时间" prop="leave_time">
                                    <DatePicker @on-change="startChange($event,1)"
                                                format="yyyy-MM-dd" :value="formCustom.leave_time"
                                                type="date" placeholder="选择离沈时间"></DatePicker>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="离沈方式" prop="leave_type">
                                    <Select  style="width:100%" v-model="formCustom.leave_type"
                                             placeholder="请选择离沈方式">
                                        <Option v-for="item in modeTypeList" :key="item.value" :value="item.value">{{item.label}}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="来源国家" prop="from_country">
                                    <i-input type="text" v-model="formCustom.from_country" placeholder="请输入来源国家"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="航班号" prop="fly_num">
                                    <i-input type="text" v-model="formCustom.fly_num" placeholder="请输入航班号"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="座位号" prop="site_num">
                                    <i-input type="text" v-model="formCustom.site_num" placeholder="请输入座位号"></i-input>
                                </Form-item>
                            </Col>
                        </Row>
                </div>
            </div>
        </Card>

        <h3>中转行程情况</h3>
        <Card class="line-style">
            <div class="line-wrap">
                <div class="line-main">
                        <Form-item label="在沈中转行程" prop="remarks">
                            <i-input type="textarea" v-model="formCustom.remarks"
                                     placeholder="请输入在沈中转行程"></i-input>
                        </Form-item>

                </div>
            </div>
        </Card>
        <h3>接触人员</h3>
            <Card class="line-style" v-for="(item,index) in formCustom.contact_list" :key="index">
                <div class="line-wrap">
                    <div class="line-main">
                        <Row>
                            <Col span="6">
                                <Form-item label="接触者姓名" :prop="`contact_list[${index}].name`" :rules="[{ required: true, message: '请输入接触者姓名', trigger: 'blur' }]">
                                    <i-input type="text" v-model="item.name" placeholder="请输入接触者姓名"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="6">
                                <Form-item label="证件号" :prop="`contact_list[${index}].id_num`" :rules="[{ required: true, message: '请输入证件号', trigger: 'blur' }]">
                                    <i-input type="text" v-model="item.id_num" placeholder="请输入证件号"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="6">
                                <Form-item label="关系" prop="relationship" >
                                    <i-input type="text" v-model="item.relationship" placeholder="请输入关系"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="4" v-if="!showDetail">
                                <Button type="success" @click="addLine()">添加</Button>&nbsp;&nbsp;
                                <Button type="error" @click="delLine(index)">删除</Button>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Card>
        </Form>
        <Row justify="center" type="flex" style="margin-top: 10px" v-if="!showDetail">
            <Col>
                <Button type="primary" @click="validateForm('formCustom')">保存</Button>
            </Col>
        </Row>

        <Modal
                v-model="modal"
                title="确认操作"
                width="20"
                @on-ok="handleSubmit"
        >
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>

    </div>
</template>

<script>
import { update, insert, getById, getDictInfoList } from '@/api/outbreak-management/overseas-to-shen/transfer-personnel'

/*
中转人员管理
 */
export default {
  data () {
    // const validateInt = (rule, value, callback) => {
    //   if (value % 1 !== 0) {
    //     callback(new Error('请输入整数'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      options1: { // 不可选今天之后的日期
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      // 弹窗控制
      modal: false,
      // 控制保存按钮显隐
      showDetail: false,
      // 控制返回按钮显隐
      showBackBtn: false,
      formCustom: {
        name: '',
        id_type: '', // 证件类型
        id_num: '', // 证件号
        contact: '', // 联系方式
        type: 'OUT', // 类型---离沈
        leave_time: '', // 来沈时间
        fly_num: '', // 航班号
        site_num: '', // 座位号
        remarks: '', // 行程
        isolate_type: '', // 隔离情况
        r_point: '', // 集中安置点
        start_time: '', // 隔离开始时间
        isolate_days: '', // 隔离时长
        nad_type: '', // 核酸检测情况
        testing_org: '', // 检测机构
        check_time: '', // 检测时间
        check_result: '', // 检测结果
        // 接触人员信息
        contact_list: [{
          name: '',
          id_num: '',
          relationship: ''
        }],
        leave_type: '',
        from_country: '',
        imp_date: ''
      },
      cardTypeList: [], // 证件类型字典
      resultTypeList: [], // 检查结果类型字典
      modeTypeList: [], // 离沈方式字典
      ruleCustom: {
        name: [
          { required: true, message: '姓名必填', trigger: 'blur' },
          { min: 0, max: 12, message: '姓名长度不能超过12', trigger: 'blur' }
        ],
        id_type: [
          { required: true, message: '证件类型必选', trigger: 'change' }
        ],
        id_num: [
          { required: true, message: '证件号必填', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '联系电话必填', trigger: 'blur' }
        ],
        imp_date: [
          { required: true, message: '上报日期必填', trigger: 'blur' }
        ],
        leave_time: [
          { required: true, message: '离沈时间必选', trigger: 'blur' }
        ],
        leave_type: [
          { required: true, message: '离沈方式必选', trigger: 'change' }
        ],
        from_country: [
          { required: true, message: '来源国家必填', trigger: 'blur' }
        ],
        fly_num: [
          { required: true, message: '航班号必填', trigger: 'blur' }
        ],
        site_num: [
          { required: true, message: '座位号必填', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validateForm (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.modal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },

    /**
       * 日期格式化
       */
    dateChange (date) {
      this.formCustom.imp_date = date
    },
    /**
       * 日期格式化
       */
    startChange (date, index) {
      if (index === 1) {
        this.formCustom.leave_time = date
      }
      if (index === 2) {
        this.formCustom.start_time = date
      }
      if (index === 3) {
        this.formCustom.check_time = date
      }
    },
    handleSubmit () {
      let requestData = this.formCustom
      if (requestData.id) {
        update(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
          } else {
            this.$Message.error('保存失败!')
          }
        })
      } else {
        insert(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
          } else {
            this.$Message.error('保存失败!')
          }
        })
      }
    },
    isEditStatus () {
      if (this.$route.query && this.$route.query.id) {
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
        this.showBackBtn = true
        this.getEditData(this.$route.query.id)
      }
    },
    getEditData (id) {
      getById({ id }).then(({ data }) => {
        let { errcode, data: res } = data
        if (errcode === 0) {
          this.formCustom = res
          this.formCustom.imp_date = this.$common.moment(res.imp_date).format('YYYY-MM-DD')
          this.formCustom.leave_time = this.$common.moment(res.leave_time).format('YYYY-MM-DD')
          this.formCustom.start_time = (res.start_time === '' || res.start_time == null ? null : this.$common.moment(res.start_time).format('YYYY-MM-DD'))
          this.formCustom.check_time = (res.check_time === '' || res.check_time == null ? null : this.$common.moment(res.check_time).format('YYYY-MM-DD'))
          this.formCustom.isolate_days = parseInt(res.isolate_days === '' || res.isolate_days == null ? 0 : res.isolate_days)
        }
      })
    },
    // 调用字典方法
    queryDictInfo (type) {
      getDictInfoList({ type: type }).then(({ data }) => {
        let { errcode, data: res } = data
        if (errcode === 0 && res.length > 0) {
          let formList = []
          res.forEach(item => {
            let { label, value } = item
            let formObj = { label: label, value: value }
            formList.push(formObj)
            if (type === 'card_type') {
              // 证件类型
              this.cardTypeList = formList
            }
            if (type === 'mode_type') {
              // 离沈方式
              this.modeTypeList = formList
            }
          })
        }
      })
    },
    addLine () {
      this.formCustom.contact_list.push(
        {
          name: '',
          id_num: '',
          relationship: ''
        })
    },
    delLine (index) {
      let len = this.formCustom.contact_list.length
      if (len === 1) {
        this.$Message.warning('只有一条数据不允许删除!')
        return
      }
      this.formCustom.contact_list.splice(index, 1)
    }
  },
  created () {
    this.queryDictInfo('card_type')
    this.queryDictInfo('mode_type')
    this.isEditStatus()
  },
  mounted () {
  }
}
</script>

<style scoped>
h3{
    margin: 10px auto;
}
</style>
